<template>
  <div class="w-full flex-none bg-blue-100 p-20px box-border rounded cursor-pointer"
       @click="toDetail">
    <div class="w-full center~ rounded">
      <div class="image image~ w-full"
           :style="{backgroundImage: `url(http://127.0.0.1:8081/static/group/${cover})`}"></div>
    </div>
    <div class="text text-sm mt-10px">{{ name }}</div>
    <div class="text text-xs mt-5px">
      <span>简介：</span>
      <span>{{ desc }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import router from "@/router";

export default defineComponent({
  props: {
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    desc: {
      type: String,
      required: true
    },
    cover: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const {id} = toRefs(props)

    function toDetail() {
      router.push({name: "groupDetail", query: {groupId: id.value}})
    }

    return {
      toDetail
    }
  }
})


</script>

<style scoped>
.image {
  height: 180px;
}

.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>